/<template>
<div class="Index">
    <header>
        <el-button type="primary" @click="AddBtn">+新增</el-button>
        <el-input  placeholder="请输入内容" v-model="input" clearable></el-input>
        <el-button type="primary" @click="SearchBtn">主要按钮</el-button>
    </header>
    <main>
        <el-table
            :data="datalist"
            border
            style="width: 100%">
            <el-table-column
                fixed
                prop="date"
                label="日期">
            </el-table-column>
            <el-table-column
                prop="user"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="tel"
                label="电话">
            </el-table-column>
            <el-table-column
                prop="city"
                label="市区">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="DelBtn(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="EditBtn(scope.row)">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
    </main>
    <footer>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="AllList.length"
            @prev-click="prevclick"
            @next-click="nextclick">
        </el-pagination>
    </footer>
    <!-- 弹框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="日期" :label-width="formLabelWidth">
            <el-input v-model="form.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.user" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市区" :label-width="formLabelWidth">
            <el-input v-model="form.city" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="AddEditBtn">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            input: '',
            title:'',
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                date: '',
                user: '',
                city: '',
                tel: '',
            },
            formLabelWidth: '120px',
            pageUp:0,
            pageSum:10,
            sum:10,
            datalist:[],
        }
    },
    computed: {
        ...mapState(['AllList'])
    },
    created() {
        this.$store.dispatch('asyncList', );
        this.datalist = this.AllList.slice(this.pageUp, this.pageSum)
    },
    watch: {
        
        AllList(newVal, oldVal) {
            this.datalist = newVal.slice(this.pageUp, this.pageSum)
        },
        
    },
    methods: {
        // 删除
        DelBtn(row) {
            console.log(row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.$store.commit('DelBtn', row.id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 新增
        AddBtn(){
            this.dialogFormVisible = true;
            this.title = '新增';
            this.form.id = new Date()*1
            this.form = {
                date: '',
                user: '',
                city: '',
                tel: '',
            }
        },
        AddEditBtn(){
            if(this.title == '新增'){
                console.log(this.form);
                this.$store.commit('AddBtn', this.form);
            }else{
                this.$store.commit('EditBtn', this.form);
            }
            this.dialogFormVisible = false;
        },
        // 编辑
        EditBtn(row){
            // console.log(row);
            this.dialogFormVisible = true;
            this.title = '编辑'
            Object.assign(this.form,row)
        },
        prevclick(){
            this.pageUp -= this.sum;
            this.pageSum -= this.sum;
            this.datalist = this.AllList.slice(this.pageUp, this.pageSum)
        },
        nextclick(){
            this.pageUp += this.sum;
            this.pageSum += this.sum;
            this.datalist = this.AllList.slice(this.pageUp, this.pageSum)
        },
        SearchBtn(){
            this.datalist=  this.AllList.filter((item,index) => {
                return item.user.includes(this.input)
            });
        }
    },
}
</script>

<style lang="scss">
.Index{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
main{
    width: 100%;
    flex: 1;
    overflow: auto;
}
footer{
    width: 100%;
    height: 150px;
    border-top: 1px solid #ccc;
}
</style>